<html>
  <head>
	<link type="text/css" rel="stylesheet" href="stylesheets/main.css">
    <script type="text/javascript" src="/js/prototype.js"></script>
    <script type="text/javascript" src="/js/effects.js"></script>
    <script type="text/javascript" src="/js/builder.js"></script>
    <script type="text/javascript" src="/js/newsviewers.js"></script>
	 <script type="text/javascript">

	   function displayArticle(idArticle){
	     divs=document.getElementsByTagName("div");
	     art_id="art_"+idArticle;
	     img_id="img_"+idArticle;
	     for( i=0; i< divs.length; i++){
			if(divs[i]['id'].match("art_.*")){
				if(divs[i]['id'] != art_id){
				  divs[i].style.display='none';
				} else {
				  if(divs[i].style.display=='none'){
				    divs[i].style.display='block';
				  } else {
				    divs[i].style.display='none';
				  }
				}
			} 
	     }
	   }
	 </script>
  </head>
	
  <body>
    <table id="main">
      <tr id="menu"><td colspan="2">
		{{menu}}
      </td></tr>
      <tr id="content">
      	<td class="leftColumn">
      		<ul>
      			<li><a href="home">Tout</a></li>
		    	{% for rss in rss_list %}
		    		<li><a href="home?rssId={{rss.key}}&view={{viewdata.type}}">{{rss.title}}</a></li>
		    	{% endfor %}
		    </ul>
		</td>      
      	<td>
      	{{navigator}}
		<table class="articles" style="width:1000px">
		  {% for subarticle in articles %}
		  <tr>
		  	{% for article in subarticle %}
		    <td>
		    <div id="img_{{article.key}}" onclick="displayArticle(id)">
		    	<img src="{{article.mainImage}}" width="200px" height="200px" title="{{article.title}} from <b>{{article.rss.title}}</b>"/>
		    </div>
		    <div id="art_{{article.key}}" class="articleContent" style="display:none;">
		      <p>{{article.content}}</p>
		    </div>
		    </td>
		    {% endfor %}
		    </tr>
		  {% endfor %}
		</table>
      </td></tr>
    </table>
  </body>
</html>
